<template>
  <el-row>
  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
  	    <el-card :body-style="{ padding: '0px' }">
<!--  	      <img src="../../../assets/023.jpg" class="image">-->
           <img src="../../assets/images/023.jpg" class="image">
  		  <div style="padding: 12px;">
  	        <span>洋酒</span>
  	        <div class="bottom clearfix">
  	          <h5>商品的价格：</h5>
  	          <el-button type="text" @click="innerVisible10 = true">立即购买</el-button>
  	                    <el-dialog title="购买页面" :visible.sync="innerVisible10">
  	                      <span>
<!--  	                        <img src="../../../assets/023.jpg" class="image">-->
                             <img src="../../assets/images/023.jpg" class="image">
  	                        <h2>数量：</h2>
  	                        <el-input-number v-model="product9.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
  	                        <h2>总价格:
  	                        </h2>
  	                       <el-input-number :value="product9.quantity*product9.price" :step="15"></el-input-number>
  	                      </span>
  	                      <el-dialog
  	                        width="30%"
  	                        title="结算页面"
  	                        :visible.sync="innerVisible"
  	                        append-to-body>
  	                        <span>
  	                          <el-button type="success" plain>支付宝</el-button>
  	                          <el-button type="success" plain>微信</el-button>
  	                          <el-button type="success" plain>其他方式</el-button>
  	                        </span>
  	                      </el-dialog>
  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="innerVisible10 = false">取 消</el-button>
  	                        <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
  	                      </div>
  	                    </el-dialog>
  	                </div>
  	              </div>
  	            </el-card>
  	          </el-col>

      <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
<!--            <img src="../../../assets/024.png" class="image">-->
             <img src="../../assets/images/024.png" class="image">
      	  <div style="padding: 12px;">
              <span>洋酒</span>
              <div class="bottom clearfix">
                <h5>商品的价格：</h5>
                <el-button type="text" @click="outerVisible = true">立即购买</el-button>
                          <el-dialog title="购买页面" :visible.sync="outerVisible">
                            <span>
<!--                              <img src="../../../assets/024.png" class="image">-->
                               <img src="../../assets/images/024.png" class="image">
                              <h2>数量：</h2>
                              <el-input-number v-model="product10.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
                              <h2>总价格:
                              </h2>
                             <el-input-number :value="product10.quantity*product10.price" :step="15"></el-input-number>
                            </span>
                            <el-dialog
                              width="30%"
                              title="结算页面"
                              :visible.sync="innerVisible"
                              append-to-body>
                              <span>
                                <el-button type="success" plain>支付宝</el-button>
                                <el-button type="success" plain>微信</el-button>
                                <el-button type="success" plain>其他方式</el-button>
                              </span>
                            </el-dialog>
                            <div slot="footer" class="dialog-footer">
                              <el-button @click="outerVisible = false">取 消</el-button>
                              <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
                            </div>
                          </el-dialog>
                      </div>
                    </div>
                  </el-card>
                </el-col>
            </el-row>
</template>

<script>
  export default {
    data() {
      return {

         outerVisible: false,
         innerVisible: false,
                innerVisible10: false,
                innerVisible11: false,
                product:{
                    price:15,
                    quantity:1
                },
               product9: {
                  price:20,
                  quantity:1
                },
                product10: {
                   price:25,
                   quantity:1
                 },
                  //num2:num1*15,
              };
            },
            methods: {
                  handleChange(value) {
                   // console.log(value);
                  }
                }

  }
</script>

<style>
  .time {
  	    font-size: 13px;
  	    color: #ffaaff;
  	  }

  	  .bottom {
  	    margin-top: 13px;
  	    line-height: 12px;
  	  }

  	  .button {
  	    padding: 0;
  	    float: right;
  	  }

  	  .image {
  	    width: 100%;
  	    display: block;
  	  }

  	  .clearfix:before,
  	  .clearfix:after {
  	      display: table;
  	      content: "";
  	  }

  	  .clearfix:after {
  	      clear: both
  	  }
</style>
